<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<link rel="stylesheet" type="text/css"
	href="../bootstrap-3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../dialog/css/dialog.css" />
<link rel="stylesheet" type="text/css" href="../css/font-awesome.css" />
<script src="../js/jquery-1.9.1.min.js" type="text/javascript"
	charset="utf-8"></script>
<script src="../js/google-maps.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery.validate.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../dialog/js/dialog.js"></script>
<script src="../js/messages_zh.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>
	<!--顶部导航 -->
	<nav class="topNavItemBox"
		style="text-shadow:#f33d6e 5px 5px 10px ; font-weight:800;">
		<div id="ItemBox">
			<div class="title_index"
				style=" color:#fff; font-size:36px; text-align:center;">肉&nbsp;品&nbsp;溯&nbsp;源&nbsp;管&nbsp;理&nbsp;系&nbsp;统&nbsp;</div>
		</div>
	</nav>

	<div class="page_main" style="padding: 30px 60px;">
		<!--中间-->
		<div class="content_intru">
			<!-- 一幅图片+文字 -->

			<div class="coont">
				<!--图片 -->
				<div class="tp">
					<img src="img/cangku.jpg" style="width:190px;height:190px" />
				</div>
				<!-- 文字 -->
				<div class="tpc">
					<div class="cz">
						<h4 style="font-weight: 800;">&nbsp;&nbsp;&nbsp;物资管理</h4>
						<span><br /> &nbsp;&nbsp;保管员通过物资管理调配<br />
							&nbsp;记录疫苗和饲料的库存和出入库 </span>
					</div>
				</div>
			</div>


			<!-- 一幅图片+文字 -->

			<div class="coont" style="left:210px">
				<!--图片 -->
				<div class="tp">
					<img src="img/siyang.jpg" style="width:190px;height:190px" />
				</div>
				<!-- 文字 -->
				<div class="tpc">
					<div class="cz">
						<h4 style="font-weight: 800;">&nbsp;&nbsp;&nbsp;饲养管理</h4>
						<span><br /> &nbsp;&nbsp;饲养员对饲养的生猪进行记录<br />
							&nbsp;记录生猪的生长环境和实时重量 </span>
					</div>
				</div>
			</div>

			<div class="coont" style="left:420px">
				<!--图片 -->
				<div class="tp">
					<img src="img/pig.jpg" style="width:190px;height:190px" />
				</div>
				<!-- 文字 -->
				<div class="tpc">
					<div class="cz">
						<h4 style="font-weight: 800;">&nbsp;&nbsp;&nbsp;出入厂管理</h4>
						<span><br /> &nbsp;&nbsp;生猪进出养殖场过程<br />
							&nbsp;记录生猪出入厂信息及检验结果 </span>
					</div>
				</div>
			</div>

			<div class="coont" style="top:210px">
				<!--图片 -->
				<div class="tp">
					<img src="img/tuzai1.jpg" style="width:190px;height:190px" />
				</div>
				<!-- 文字 -->
				<div class="tpc">

					<div class="cz">
						<h4 style="font-weight: 800;">&nbsp;&nbsp;&nbsp;屠宰包装</h4>
						<span><br /> &nbsp;&nbsp;屠宰包装生猪和各个部位<br />
							&nbsp;记录屠宰流水线中的屠宰信息 </span>
					</div>
				</div>
			</div>

			<div class="coont" style="top:210px; left:210px">
				<!--图片 -->
				<div class="tp">
					<img src="img/transport.png" style="width:190px;height:190px" />
				</div>
				<!-- 文字 -->
				<div class="tpc">
					<div class="cz">
						<h4 style="font-weight: 800;">&nbsp;&nbsp;&nbsp;冷链运输</h4>
						<span><br /> &nbsp;&nbsp;对猪肉产品的运输<br />
							&nbsp;记录物流运输和装卸货信息 </span>
					</div>
				</div>
			</div>

			<div class="coont" style="left:420px;top:210px">
				<!--图片 -->
				<div class="tp">
					<img src="img/suyuan.png" style="width:190px;height:190px" />
				</div>
				<!-- 文字 -->
				<div class="tpc">
					<div class="cz">
						<h4 style="font-weight: 800;">&nbsp;&nbsp;&nbsp;溯源查看</h4>
						<span><br /> &nbsp;&nbsp;连接电商平台查看产品追溯信息<br />
							&nbsp;查看溯源六个模块信息 </span>
					</div>
				</div>
			</div>
		</div>
		<!--使用规则-->
		<div class="use_rule">
			<h2>
				系统使用说明
			</h2>

				<br /> <br /> 各个模块的使用权限以登录时的角色为准 <br /> <br /> 以下为各类用户的使用标准，望周知
				<br /> --------------------------------------------------- <br />
				仓管员：物资管理 <br /> <br /> 饲养员：饲养管理 <br /> <br /> 生猪出入场记录员：出入场管理
				检验检疫管理 <br /> <br /> 屠宰员：屠宰包装管理 <br /> <br /> 运输管理员：冷链运输管理 <br />
				<br /> 超级管理员：all module 如有建议，欢迎<a href="suggestionAdd.ftl">联系我们</a>。
				<br /> --------------------------------------------------- <br />
				祝您生活愉快！<span id="index_time"></span>
		</div>
		<div class="footer" style="margin-top:60px;">
			<div class="footer_lineone">
				<span id="logo"></span>肉品溯源管理系统 
				<span class="footer_lineoneSpan"><a href="aboutus.html">关于我们</a></span>
				<span class="footer_lineoneSpan"><a target="_blank" href="http://www.cfsiw.com/">食品安全信息</a></span> 
				<span class="footer_lineoneSpan"><a href="suggestionAdd.ftl">联系我们</a></span>
			</div>
			<div class="footer_linetwo">&copy;2017广东技术师范学院</div>
		</div>
	</div>


</body>
<script>
	$(document).ready(
			function() {
				$(".vertical-nav").verticalnav({
					speed : 400,
					align : "left"
				});

				$(".coont").mouseover(
						function() {
							$(this).children(".tpc").stop().animate({
								bottom : '0'
							}, 300);
							$(this).children(".tp").stop().animate({
								top : '-100%'
							}, 300);
							var tetHeight = $(this).children(".tpc").height();
							var czHeight = $(this).children(".tpc").children(
									".cz").height();
							var czTop = (tetHeight - czHeight) / 2;
							$(this).children(".tpc").children(".cz").css(
									"padding-top", czTop);
						});
				$(".coont").mouseout(function() {
					$(this).children(".tpc").stop().animate({
						bottom : '-100%'
					}, 300);
					$(this).children(".tp").stop().animate({
						top : '0px'
					}, 300);
				});
				function getNowFormatDate() {
					var date = new Date();
					var seperator1 = "-";
					var seperator2 = ":";
					var month = date.getMonth() + 1;
					var strDate = date.getDate();
					if (month >= 1 && month <= 9) {
						month = "0" + month;
					}
					if (strDate >= 0 && strDate <= 9) {
						strDate = "0" + strDate;
					}
					var currentdate = date.getFullYear() + seperator1 + month
							+ seperator1 + strDate + " " + date.getHours()
							+ seperator2 + date.getMinutes() + seperator2
							+ date.getSeconds();
					return currentdate;
				}

				setInterval(function() {
					$("#index_time").html(getNowFormatDate());
				}, 1000);
			});
</script>

</html>